<script type="text/x-template" id="image-upload-template">
    <div class="image-upload">
        <div class="demo-upload-list" v-for="(url, idx) in urls">
            <img :src="url">
            <div class="demo-upload-list-cover" @click.stop.prevent="handleView(url)">
                <Icon v-if="muti" type="md-arrow-dropleft" @click.stop.prevent="moveLeft(idx)"></Icon>
                <Icon type="ios-trash-outline" @click.stop.prevent="handleRemove(idx)"></Icon>
                <Icon v-if="muti" type="md-arrow-dropright" @click.stop.prevent="moveRight(idx)"></Icon>
            </div>
        </div>
        <Upload
            ref="upload"
            :show-upload-list="false"
            :format="format"
            :on-format-error="handleFormatError"
            :before-upload="beforeUpload"
            :multiple="muti"
            :disabled="disabled"
            type="drag"
            action="''"
            style="display: inline-block;width:58px;">
            <div style="width: 58px;height:58px;line-height: 58px">
                <div v-if="precent > 0 && precent < 100">{{precent}}%</div>
                <Icon v-else :type="disabled ? 'ios-close-circle-outline' : 'md-cloud-upload'" size="20"></Icon>
            </div>
        </Upload>
        <Modal v-model="visible" :footer-hide="true">
            <img :src="previewSrc" v-if="visible" style="width: 100%">
        </Modal>
    </div>
</script>
<script>
    Vue.component('ImageUpload', {
        template: '#image-upload-template',
        props: {
            value: {
                type: Array | String,
            },
            muti: {
                type: Boolean,
                default: false,
            }
        },
        mounted () {
            this.initValue(this.value)
        },
        computed: {
            disabled() {
                if(!this.muti && this.value && this.value.length > 0) return true
                return false
            }
        },
        watch: {
            value(v) {
                this.initValue(v)
            }
        },
        data () {
            return {
                format: ['jpg','jpeg','png'],
                previewSrc: '',
                precent: 0,
                visible: false,
                urls: [],
            }
        },
        methods: {
            initValue(value) {
                if(!value) return
                if(this.muti) {
                    this.$set(this, 'urls', value)
                } else {
                    this.$set(this, 'urls', [value])
                }
            },
            handleView(url) {
                this.previewSrc = url;
                this.visible = true;
            },
            handleRemove(idx) {
                const urls = [...this.urls]
                urls.splice(idx, 1);
                this.$set(this, 'urls', urls)
                this.onChange()
            },
            moveLeft(idx) {
                if(idx <= 0) return
                const urls = [...this.urls]
                const tmp = urls[idx]
                urls[idx] = urls[idx-1]
                urls[idx-1] = tmp
                this.$set(this, 'urls', urls)
                this.onChange()
            },
            moveRight(idx) {
                if(idx >= this.urls.length - 1) return
                const urls = [...this.urls]
                const tmp = urls[idx]
                urls[idx] = urls[idx+1]
                urls[idx+1] = tmp
                this.$set(this, 'urls', urls)
                this.onChange()
            },
            handleFormatError (file) {
                this.$Notice.warning({
                    title: '不支持的图片格式',
                    desc: '不支持 ' + file.name + ' 格式图片, 请上传 jpg 或 png.'
                });
            },
            beforeUpload(file) {
                // this.loading = true;
                console.log('beforeUpload:', file)
                uploadServer('/admin/upload', file, this.onProgress, this.onFinish)
                return false;
            },
            async onProgress(precent) {
                console.log('onProgress:', precent)
                this.precent = precent
            },
            async onFinish(res, data) {
                console.log('onFinish', res, data)
                if(!res) return
                const urls = [...this.urls, data.url]
                this.$set(this, 'urls', urls)
                this.onChange()
            },
            onChange() {
                if(this.muti) {
                    this.$emit('input', this.urls)
                } else {
                    this.$emit('input', this.urls[0])
                }
            }
        }
    })
</script>
<style>
    .demo-upload-list{
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0,0,0,.2);
        margin-right: 4px;
    }
    .demo-upload-list img{
        width: 100%;
        height: 100%;
    }
    .demo-upload-list-cover{
        cursor: pointer;
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0,0,0,.6);
    }
    .demo-upload-list:hover .demo-upload-list-cover{
        display: block;
    }
    .demo-upload-list-cover i{
        color: #fff;
        cursor: pointer;
        font-size: 15px;
        margin-top: 30px;
    }
</style>
